<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>搜索视频</title>
		<script src="../js/jquery3.5.1.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/mine.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/myvideo.css" />
		<link rel="stylesheet" href="../css/searchVideo.css" />
		<link href="../layui/css/layui.css" rel="stylesheet">
	</head>
	<body>
		<div id="app">
			<div id="searchTop">
				<ul>
					<li><a style="color: #FF1493;" href="#">视频</a></li>
					<li><a @click="goselectUser" style="color: white;" href="searchUser.html">用户</a></li>
				</ul>
			</div>
			<div id="searchtags">
				<ul>
					<li @click="selectAll(0)" style="color: #FF1493;" class="tags">最多播放</li>
					<li @click="selectAll(1)" class="tags">最新发布</li>
					<li @click="selectAll(2)" class="tags">最多喜欢</li>
				</ul>
			</div>
			<template v-for="obj in releasetable">
				<div class="video">
					<div @click="intoVideo(obj.releaseId,obj.userId)" :id="obj.releaseNum" @mouseout="mousout(obj)" @mouseover="mousin(obj)" class="image-container">
						<img class="tu" :id="obj.releaseNum+'img'" :src="obj.worksCover" />
					</div>
					<div class="xin">
						<i class="layui-icon layui-icon-play" style="font-size: 13px; color: white;"></i>
						<span class="num">{{obj.viewCounts}}</span>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span class="num">{{obj.viodeTime}}</span>
					</div>
					<div class="tile">{{obj.title}}</div>
					<span class="datet">{{obj.releaseTime}}</span>
				</div>
			</template>
		</div>
		
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				releasetable:''
			},methods:{
				goselectUser(){
				//查询用户
					location.href="searchUser.html"
				},
				selectAll(num){
					let searhMag=window.sessionStorage.getItem("searchMag")
					axios.get(API+"searchViode?searhMag="+searhMag+"&type="+num).then(res=>{
						this.releasetable=res.data;
						console.log(this.releasetable)
					})
				},
				intoVideo(rid,uid){
					window.sessionStorage.setItem("releaseId",rid)
					window.sessionStorage.setItem("userId",uid)
					window.open("http://127.0.0.1:8848/doubi/RecommLook.html")
				},
				initData(){
					//查询数据
					//获取查询数据
					let searhMag=window.sessionStorage.getItem("searchMag")
					axios.get(API+"searchViode?searhMag="+searhMag+"&type=0").then(res=>{
						this.releasetable=res.data;
						console.log(this.releasetable)
					})
				},
				mousout(obj){
						$("#"+obj.releaseNum).html("<img class='tu' id='"+obj.releaseNum+"img' src='"+obj.worksCover+"' />");
						$("#"+obj.releaseNum).next().css("visibility", "visible")
				},
				mousin(obj){
						axios.post(API+"selectMyVoide?releaseId="+obj.releaseId).then(res=>{
							let videosSrc=res.data.videosSrc;
							$("#"+obj.releaseNum).html("<video autoplay muted loop  class='tu' width='246' height='138' poster='"+obj.worksCover+"'> " +
								"<source  src='"+videosSrc+"' type='video/mp4'> </video>");
							//$("#"+obj.releaseNum+"img").attr("src",obj.worksCover)
							//console.log($("#"+obj.releaseNum+"img").attr("class"))
						})
					
				}
			},mounted(){
				this.initData()
				
			}
		})
	</script>
	<script type="text/javascript">
		$(".tags").click(function(){
			$('.tags').each(function() {
			    $('.tags').css("color","white");
			});
			$(this).css("color","#FF1493");
		})
	</script>
</html>
